<template>
  <div class="w100">
    <div class="topBox add_btn_top">
      <el-button
        type="primary"
        class="addButton"
        size="mini"
        @click="handleEdit"
        >编辑
      </el-button>
      <el-button type="danger" class="addButton" size="mini" @click="handleDel"
        >删除
      </el-button>
      <el-button @click="closePage" class="addButton" size="mini"
        >关闭
      </el-button>
    </div>
    <div class="details_box w100 flex-x">
      <img :src="details.imageUrl | filtersFileUrl()" alt="" class="img_box" />
      <div class="flex-x flex-top">
        <div class="flex-y" style="margin: 0 100px">
          <div class="flex-x">
            <div class="details_title">Token:</div>
            <div class="description">{{ details.token }}</div>
          </div>
          <div class="flex-x" style="margin: 40px 0">
            <div class="details_title">品牌:</div>
            <div class="description">{{ details.brand }}</div>
          </div>
          <div class="flex-x">
            <div class="details_title">模式:</div>
            <div class="description">{{ details.model }}</div>
          </div>
        </div>
        <div class="flex-y" style="">
          <div class="flex-x">
            <div class="details_title">名称:</div>
            <div class="description">{{ details.name }}</div>
          </div>
          <div class="flex-x" style="margin: 40px 0">
            <div class="details_title">更新时间:</div>
            <div class="description">
              {{ details.updatedDate | formatDate }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Dialog
      :isedit="true"
      ref="dialogRef"
      :show.sync="showDialog"
      @closeDialog="closeDialog"
    ></Dialog>
  </div>
</template>

<script>
import Dialog from "../components/Dialog.vue";
import { getDetails, delToken } from "@/api/loudspeakerBox";
import _ from "lodash";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      details: {},
      token: "",
      showDialog: false,
    };
  },
  mounted() {
    this.token = this.$route.query.token;
    this.init();
  },
  methods: {
    handleDel() {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delToken(this.token).then((res) => {
            this.$msg({
              type: "success",
              message: "删除成功!",
            });
            this.closePage();
          });
        })
        .catch((err) => {});
    },
    closeDialog(token) {
      if (token) {
        this.toLink(token);
      }
    },
    toLink(token) {
      this.$router.push({
        path: "/_empty",
        query: {
          data: JSON.stringify({ token: token }),
          path: "loudspeakerBoxDetails",
        },
      });
    },
    // 关闭页面
    closePage() {
      this.$router.replace({
        path: "/device/loudspeakerBox",
      });
    },
    handleEdit() {
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs.dialogRef.form = _.cloneDeep({
          ...this.details,
          oldToken: this.token,
        });
      });
    },
    async init() {
      const res = await getDetails(this.token);
      this.details = res.data;

      console.log("res :>> ", this.details);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.details_box {
  padding: 24px;
  background-color: #fff;
  .details_title {
    margin-right: 10px;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    width: 60px;
    text-align: right;
  }
  .description {
    width: auto;
    color: #666666;
    font-size: 14px;
    font-weight: 400;
  }
  .img_box {
    width: 207px;
    height: 207px;
    min-width: 207px;
    min-height: 207px;
    transition: all 0.6s;
    cursor: pointer;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>